<script setup lang="ts">
import http from '@/http';
import { ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue';


// 存储当前选中的行数据
const selectedRows = ref([]);
let flg=ref(false)
// 表格的引用
const tableRef = ref(null);

// 处理表格选择项变化的方法
const handleSelectionChange = (rows) => {
  selectedRows.value = rows;
  flg.value = rows.length > 0;
};
//当前页的页号发生改变
const handleCurrentChange = (val: number) => {
  //console.log(`current page: ${val}`)
  //重新获取当前页的数据
  pageNum.value = val
  page()
}
let providerData = ref([])
//获取供应商
http.get('pro/getAll').then((res) => {
  providerData.value = res
});

let statusData = ref([])
const fetchDictData = async (dictType) => {
  await http.get('/api/dict/data/' + dictType).then((res) => {
    statusData.value = res;
  }).catch((error) => {
    console.error('获取字典数据失败:', error);
  })
};



//当前页
let pageNum = ref(1)
//每页条数
let pageSize = ref(5)
//总条数
let total = ref(0)
//条件
let providerId = ref('')
let applyUserName = ref('')
let status = ref('2')

//表格数据
let purDate = ref([])

const handleSizeChange = (val: number) => {
  pageSize.value = val;
    page();
};
//获取数据
function page() {
    http.get('pur/pages', {
        params: {
            pageNum: pageNum.value,
            pageSize: pageSize.value,
            providerId: providerId.value,
            applyUserName: applyUserName.value,
            status: status.value
           
        }
    }).then((res) => {
        purDate.value = res.list
        total.value = res.total
    });
}
  onMounted(() => {
    page();
    fetchDictData("his_order_status");
  });
  function search() {
    page();
  }
  function reset() {
    providerId.value = ''
    applyUserName.value = ''
    status.value = ''
    page();
  }

//审核
function SH(flag) {
    let ids = selectedRows.value.map((item) => item.purchaseId).join(',')
    if(flag){
http.get('pur/check', {
    params: {
        ids: ids,
        flgg: flag
    }
}).then((res) => {
    page();
})
    }else{
 http.get('pur/check', {
    params: {
        ids: ids,
        flgg: flag
    }
 }).then((res) => {
     page();
 })
        
    }
}



  </script>

<template>
    <el-container>
      <el-header> 
        <el-row >
        <el-col :span="5">
          <div class="grid-content ep-bg-purple" >
        供应商  <el-select v-model="providerId" placeholder="请选择供应商" style="width: 120px;">
          <el-option v-for="p in providerData"  :label="p.providerName"    :value="p.providerId"  />
          </el-select> 
        </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content ep-bg-purple" >
        申请人    <el-input v-model="applyUserName" placeholder="请输入申请人" style="width: 120px;"></el-input>
        </div>
        </el-col>
            <el-col :span="4">
            <div class="grid-content ep-bg-purple-light" >
           单据状态
           <el-select v-model="status" placeholder="状态" style="width: 120px;">
          <el-option label="待审核"  value="2"  />
          </el-select> 
                </div>
            </el-col>
            <el-col :span="2">
            <div class="grid-content ep-bg-purple-light" >
              <el-button type="primary" icon="search" @click="search" width="100px">搜索</el-button>
              </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content ep-bg-purple-light" >
              <el-button  icon="Refresh" @click="reset" width="100px">重置</el-button>
             </div>
          </el-col>
        </el-row>

        <el-row>
            <el-col :span="3">
      <div class="grid-content ep-bg-purple" >
        <el-button type="primary" icon="Plus" @click="SH(true)" :disabled="!flg">审核通过</el-button>
        </div>
    </el-col> 
    <el-col :span="3">
      <div class="grid-content ep-bg-purple" >
        <el-button type="success" icon="EditPen" @click="SH(false)" :disabled="!flg">审核不通过</el-button>
        </div>
    </el-col> 
  </el-row>
      </el-header>
  
      <el-main>
        <el-table :data="purDate" style="width: 100%;margin-top: 50px;" row-key="purchaseId" border @selection-change="handleSelectionChange" ref="tableRef">
          <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="purchaseId"  label="单据id" align="center"  width="220">
            </el-table-column>
            <el-table-column prop="providerName" label="供应商" align="center" width="200"></el-table-column>
            <el-table-column prop="purchaseTradeTotalAmount" label="采购批发总额" align="center" width="120"></el-table-column>
            <el-table-column prop="status" label="状态" align="center" width="200">
                <template #default="{ row }">
                    <span v-if="row.status == '1'">未提交</span>
                    <span v-if="row.status == '2'">待审核</span>
                    <span v-if="row.status == '3'" >审核通过</span>
                    <span v-if="row.status == '4'" >审核失败</span>
                    <span v-if="row.status == '5'" >作废</span>
                    <span v-if="row.status == '6'">入库成功</span>
                </template>
            </el-table-column>
            <el-table-column prop="applyUserName" label="申请人" align="center"width="130" ></el-table-column>
            <el-table-column prop="storageOptUser" label="入库操作人" align="center" width="130"></el-table-column>
            <el-table-column prop="storageOptTime" label="入库时间" align="center" width="220"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" width="250"></el-table-column>
            </el-table>
                 <!--分页-->
  <el-row style="margin-top: 20px;">
    <el-col :span="12" :offset="6">
      <div class="demo-pagination-block">
         <el-pagination
        @size-change="handleSizeChange"
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[2, 5, 8, 10]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
    />
      </div>
    </el-col>
  </el-row>
      </el-main>
    </el-container>

  </template>
  <style scoped>
  .el-header {
    background-color: #f5f7fa;
    padding: 20px;
  }
  .el-dialog__body {
  padding: 20px;
}
  </style>